<template>
    <div class="container">
        <div class="btns">
            <el-button @click="back">返回</el-button>
            <el-button type="primary" @click="finish">{{ isAdd ? '创建' : '保存' }}</el-button>
        </div>
        <div class="edit_content">
            <div class="item">
                <span class="item-title">
                    <span style="color:red">*</span>
                    角色名称：</span
                >
                <el-input placeholder="请输入角色名称" v-model="name" maxlength="30"> </el-input>
            </div>
            <span class="desc">30个字符以内。</span>
            <div class="item">
                <span class="item-title">说明：</span>
                <el-input type="textarea" v-model="remarks" maxlength="30"> </el-input>
            </div>
            <el-tree
                :data="nodes"
                show-checkbox
                node-key="id"
                :default-expand-all="true"
                :check-on-click-node="true"
                :check-strictly="false"
                :props="defaultProps"
                ref="tree"
            >
            </el-tree>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isAdd: Boolean,
        roleId: Number
    },
    data() {
        return {
            name: '',
            remarks: '',
            nodes: [],
            permissions: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            selIds: [],
            permissionIds: []
        };
    },
    created() {
        this.getNodes();
        if (!this.isAdd) {
            this.getData();
        }
    },
    methods: {
        getNodes() {
            let self = this;
            self.$api
                .get({
                    url: '/role/getAllPermission'
                })
                .then(res => {
                    console.log('🚀 ~ file: editRole.vue ~ line 67 ~ getNodes ~ res', res);

                    // self.name = res.data.name || '';
                    // self.remarks = res.data.remarks || '';
                    self.nodes = res.data || [];
                    // self.permissions.forEach(item => {
                    //     self.$nextTick(() => {
                    //         self.$refs.tree.setChecked(item, item.checked == 1, true);
                    //     });
                    // });
                })
                .catch(err => {});
        },
        getData() {
            let self = this;
            self.$api
                .get({
                    url: '/role/getDetail',
                    data: {
                        roleId: self.roleId
                    }
                })
                .then(res => {
                    self.name = res.data.name || '';
                    self.remarks = res.data.remarks || '';
                    self.permissions = res.data.permissions || [];
                    for (var it of self.permissions) {
                        if (it.checked == 1) {
                            self.selIds.push(it.id);
                        }
                        for (var i of it.children || []) {
                            if (i.checked == 1) {
                                self.selIds.push(i.id);
                            }
                        }
                    }
                    self.permissions.forEach(item => {
                        self.$nextTick(() => {
                            // self.$refs.tree.setChecked(item, item.checked == 1, true);
                            self.$refs.tree.setCheckedKeys(self.selIds, false);
                        });
                    });
                })
                .catch(err => {});
        },
        getCheckedNodes() {
            let arr = this.$refs.tree.getCheckedNodes();
            console.log('🚀 ~ file: editRole.vue ~ line 73 ~ getCheckedNodes ~ e', arr);
            // for (var it of this.permissions) {
            //     it.checked = 0;
            //     for (var i of it.children || []) {
            //         i.checked = 0;
            //     }
            // }
            // for (var item of arr) {
            //     for (var it of this.permissions) {
            //         if (item.id == it.id) {
            //             console.log('🚀 ~ file: ', this.permissions);
            //             it.checked = 1;
            //         } else {
            //             for (var i of it.children || []) {
            //                 if (item.id == i.id) {
            //                     i.checked = 1;
            //                 }
            //             }
            //         }
            //     }
            // }
        },
        back() {
            this.$emit('back');
        },
        finish() {
            if (!this.name || this.name.length == 0) {
                this.$message.error('请输入角色名称');
                return;
            }
            let arr = this.$refs.tree.getCheckedNodes();
            let permissionIds = arr.map(x => x.id) || [];
            let data = {
                name: this.name,
                id: this.roleId || null,
                remarks: this.remarks,
                permissionIds: permissionIds
            };
            this.$api
                .post({
                    url: '/role/save',
                    data: data
                })
                .then(res => {
                    this.$emit('save');
                })
                .catch(err => {});
        },
        handleClick() {}
    }
};
</script>

<style scoped lang="scss">
.container {
    .btns {
        display: flex;
        justify-content: space-between;
    }
    .edit_content {
        display: flex;
        flex-direction: column;
        .item {
            margin-right: 10px;
            max-width: 500px;
            display: flex;
            // align-items: center;
            margin-top: 20px;
        }
        .desc {
            margin-top: 4px;
            padding-left: 100px;
            font-size: 12px;
            color: cornflowerblue;
        }
        .item-title {
            min-width: 100px;
            text-align: right;
            line-height: 32px;
        }
    }
}
</style>
